<template>
<div class="panel">
    <div class="panel-header">
        <div class="bl"></div>
        <div class="title">进店记录[{{ inviteList.length }}次]</div>
        <div class="more">
            <el-button type="primary" @click="showCreate()">添加进店</el-button>
        </div>
    </div>
    <div class="panel-body">
        <el-table :data="inviteList" border>
            <el-table-column label="操作" fixed width="100">
                <template slot-scope="scope">
                    <el-button type="text" size="small" @click="showEdit(scope.row)">编辑</el-button>
                    <el-button type="text" size="small" @click="deleteInvite(scope.row)">删除</el-button>
                </template>
            </el-table-column>
            <el-table-column label="门店" prop="store.title" align="center" min-width="180"></el-table-column>
            <el-table-column label="邀约人" prop="creator.realname" align="center" width="120">
                <template slot-scope="scope">
                    <div class="avatar">
                        <span>{{ scope.row.creator.realname }}</span>
                        <span v-if="scope.row.creator.status == 0">[离职]</span>
                    </div>
                </template>
            </el-table-column>
            <el-table-column label="预约时间" prop="invite_time" width="140"></el-table-column>
            <el-table-column label="进店状态" prop="status_text" align="center" width="100">
                <template slot-scope="scope">
                    <el-tag :type="scope.row.status_color" @click="showEdit(scope.row)">{{ scope.row.status_text }}</el-tag>
                </template>
            </el-table-column>
            <el-table-column label="进店时间" prop="visit_time" width="130"></el-table-column>
            <el-table-column label="创建时间" prop="create_time" width="130"></el-table-column>
            <el-table-column label="备注">
                <template slot-scope="scope">
                    <div v-html="scope.row.remark.replace(/\n/g, '<br>')"></div>
                </template>
            </el-table-column>
        </el-table>
    </div>
    <invite-edit ref="editRef" @refresh="getInviteList"></invite-edit>
    <invite-create ref="createRef" @refresh="getInviteList"></invite-create>
</div>
</template>

<script>
import inviteEdit from "./invite-edit.vue";
import inviteCreate from "./invite-create.vue";

import {
    getInviteListApi,
    deleteInviteApi,
} from "@/api/customer/invite.js";

export default {
    name: "invite-list",
    components: {
        inviteEdit,
        inviteCreate,
    },
    props: {
        allocate: {
            type: Object,
            default: {
                id: 0,
                member_id: 0,
            },
        },
        customer: {
            type: Object,
            default: () => {
                return {
                    id: 0,
                };
            },
        },
    },
    filters: {
        toImages(images) {
            return images.map(item => item.url);
        },
    },
    data() {
        return {
            inviteList: []
        };
    },
    methods: {
        // 获取进店记录
        getInviteList() {
           getInviteListApi({
                allocate_id: this.allocate.id,
                member_id: this.customer.id,
            }).then(res => {
                this.inviteList = res.data;
            });
        },
        // 添加进店信息
        showCreate() {
            this.$refs["createRef"].showDrawer(this.allocate, this.customer);
        },
        // 编辑进店信息
        showEdit(row) {
            this.$refs["editRef"].showDrawer(row, this.allocate, this.customer);
        },
        // 删除进店记录
        async deleteInvite(row) {
            await this.$confirm("确认删除该进店记录吗?", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
            });
            await deleteInviteApi(row);
            this.getInviteList();
        },
    },
};
</script>

<style lang="scss" scoped>
.avatar {
    cursor: pointer;
}
</style>
